<template>
  <el-dialog title="店铺二维码" :visible="showShopQRCode" @close="hide">
    <div v-loading="getQRCodeLoading" class="qrcode-wrap">
      <img :src="imgBase64" alt="" class="qrcode" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    shopInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      showShopQRCode: false,
      imgBase64: '',
      getQRCodeLoading: false
    }
  },
  methods: {
    handleShow () {
      this.showShopQRCode = true
      this.getQRCodeLoading = true
      this.getQRCode()
        .catch(err => {
          console.error(err)
        })
        .finally(() => {
          this.getQRCodeLoading = false
        })
    },
    hide () {
      this.showShopQRCode = false
      this.getQRCodeLoading = false
      this.imgBase64 = ''
    },
    async getQRCode () {
      const res = await this.$http.post(this.ApiUrls.shopQRCOde, {
        scene: `${this.shopInfo.id}`,
        page: 'pages/shopDetail/shopDetail',
        width: '300',
        autoColor: false,
        isHyaline: true
        // lineColor: JSON.stringify({
        //   r: '220',
        //   g: '205',
        //   b: '70'
        // })
      })
      console.log('test res', res)
      this.imgBase64 = `data:image/jpg;base64,${res.data.body}`
    }
  }
}
</script>

<style lang="less" scoped>
.qrcode-wrap {
  min-width: 300px;
  min-height: 300px;
  display: block;
  margin: 0 auto 20px;
  text-align: center;
}
.qrcode {
}
</style>
